import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
// import 'antd/dist/antd.css';
import { connect } from 'react-redux'
import Top from '../../containers/Top'
import { openNotification } from '../../util/util'
import './index.css'
import {
  PlusSquareTwoTone,
  HighlightTwoTone,
  AlertTwoTone,
  PieChartTwoTone,
  CopyTwoTone,
  AccountBookTwoTone,
  QuestionCircleTwoTone,
  CustomerServiceTwoTone,
  PushpinTwoTone,
} from '@ant-design/icons'

class index extends Component {
  openNotification = (e, flag) => {
    if (!this.props.user.name) {
      openNotification({description: '请先登录'})
      e.preventDefault()
      return
    }
    if (flag) {
      openNotification({description: '该功能暂未开放'})
      e.preventDefault()
      return
    }
    if (this.props.user.isDoctor) {
      openNotification({description: '医生暂无权限访问此页面'})
      e.preventDefault()
      return
    }
  }
  render() {
    return (
      <div className="medical">
        <Top></Top>
        <div className="m_items">
          <h4 className="m_title">医疗必备</h4>
          <div className="m_item">
            <NavLink className="m_span" to="/medical/appointment" onClick={(e) => this.openNotification(e, false)}>
              <PlusSquareTwoTone className="m_icon"/>
              <p>预约挂号</p>
            </NavLink>
            <NavLink className="m_span" to="/medical/monitoring" onClick={(e) => this.openNotification(e, false)}>
              <HighlightTwoTone className="m_icon"/>
              <p>每日填报</p>
            </NavLink>
            <NavLink className="m_span" to="/medical/info" onClick={(e) => this.openNotification(e, false)}>
              <AlertTwoTone className="m_icon" />
              <p>消息推送</p>
            </NavLink>
          </div>
        </div>
        <div className="m_items">
          <h4 className="m_title">门诊服务</h4>
          <div className="m_item">
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <QuestionCircleTwoTone className="m_icon"/>
              <p>在线问诊</p>
            </span>
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <CustomerServiceTwoTone className="m_icon" />
              <p>智能候诊</p>
            </span>
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <PushpinTwoTone className="m_icon" />
              <p>核酸检测</p>
            </span>
          </div>
        </div>
        <div className="m_items">
          <h4 className="m_title">住院服务</h4>
          <div className="m_item">
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <AccountBookTwoTone className="m_icon"/>
              <p>住院充值</p>
            </span>
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <PieChartTwoTone className="m_icon" />
              <p>智能点餐</p>
            </span>
            <span className="m_span" onClick={(e) => this.openNotification(e, true)}>
              <CopyTwoTone className="m_icon" />
              <p>每日清单</p>
            </span>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({
    user: state.user
  }),
)(index)